 /*
 * @description: 精英pk赛/直属精英、间接精英
 * @Author: along
 * @Date: 2021-08-10
 * @Last Modified by: along
 * @Last Modified time: 2021-08-10
 */
<template>
    <div class="eliteSelfOrder">
        <div class="__nav">
            <p class="__nav_title">
                好友订单
            </p>
            <p
                class="__nav_back"
                @click="() => {
                    this.$router.push({
                        name: 'elitePkStatistics'
                    })
                }"
            >
                返回
            </p>
        </div>
        <!-- header -->
        <div class="header-nav">
            <div class="header_left">
                <div class="__info">
                    <p class="__info_title">用户信息</p>
                    <el-input
                        v-model="formData.keyword"
                        placeholder="请输入用户编号/手机号"
                        size="small"
                        clearable
                        suffix-icon="el-icon-search"
                        @change="getTableData(1)"
                        @keyup.native.enter="getTableData(1)"
                    />
                </div>
                <div class="__info">
                    <p class="__info_title">商品信息</p>
                    <el-input
                        v-model="formData.user_info"
                        placeholder="请输入商品名称/编号"
                        size="small"
                        clearable
                        suffix-icon="el-icon-search"
                        @change="getTableData(1)"
                        @keyup.native.enter="getTableData(1)"
                    />
                </div>
                <div class="__info">
                    <p class="__info_title">是否退款</p>
                    <el-select
                        v-model="formData.is_refund"
                        clearable
                        filterable
                        placeholder="请选择"
                        size="small"
                        @change="getTableData(1)"
                    >
                        <el-option
                            v-for="item in refundList"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        />
                    </el-select>
                </div>
            </div>
        </div>
        <!-- /header -->

        <!-- table -->
        <div class="__wrap">
            <el-table
                :data="tableData"
                height="100%"
                style="width: 100%;"
                border
                ref="eliteSelfOrder"
                @sort-change="handleSortChanged"
            >
                <el-table-column
                    type="index"
                    width="80"
                    label="序号"
                    align="center"
                />
                <el-table-column
                    prop="true_name"
                    label="用户信息"
                    show-overflow-tooltip
                    :formatter="emptyFormatter"
                    align="left"
                >
                    <template slot-scope="scope">
                        <div class="__flex_wrap">
                            <p class="__flex_wrap_title">{{ scope.row.true_name }}</p>
                            <p>手机号:{{ scope.row.phone }}</p>
                            <p>精英等级:E{{ scope.row.agent_level }}</p>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="order_no"
                    label="订单编号"
                    show-overflow-tooltip
                    :formatter="emptyFormatter"
                    align="left"
                />
                <el-table-column
                    prop="goods_title"
                    label="商品信息"
                    show-overflow-tooltip
                    :formatter="emptyFormatter"
                    align="left"
                />
                <el-table-column
                    prop="pay_money"
                    label="实付金额"
                    show-overflow-tooltip
                    :formatter="emptyFormatter"
                    align="left"
                    sortable="custom"
                    :width="140"
                />
                <el-table-column
                    prop="order_create_time"
                    label="下单时间"
                    show-overflow-tooltip
                    :formatter="emptyFormatter"
                    align="center"
                >
                    <template slot-scope="scope">
                        {{ scope.row.order_create_time * 1000 | dateFormatter('yyyy/MM/dd HH:mm') }}
                    </template>
                </el-table-column>
                <el-table-column
                    prop="is_refund"
                    label="是否退款"
                    show-overflow-tooltip
                    :formatter="emptyFormatter"
                    align="center"
                >
                    <template slot-scope="scope">
                        {{ scope.row.is_refund == 1 ? '是' : '否' }}
                    </template>
                </el-table-column>
            </el-table>
            <!-- /table -->

            <!-- /分页 -->
            <div class="pagination-wrapper clearfix">
                <el-pagination
                    layout="total, prev, pager, next, jumper"
                    background
                    :current-page.sync="page.now_page"
                    :total="page.total_count"
                    :page-size="page.page_size"
                    @current-change="getTableData"
                />
            </div>
        </div>
    </div>
</template>

<script>
import { back } from '@/mixin/back';
export default {
    mixins: [back],
    components: {
    },
    data () {
        return {
            no: '',
            TYPE: '',//directly:直属 indirect:间接
            formData: {
                keyword: '',
                user_info: '',
                is_refund: 99
            },
            refundList: [{value:99, label: '全部'},{value:1, label: '是'},{value:0, label: '否'}],
            page: {
                now_page: 1,
                total_count: 0,
                page_size: 0
            },
            filterData: {
                sort_field: '',
                sort_type: 0
            },
            tableData: [],
            authResult: {}
        };
    },
    filters: {},
    computed: {},
    watch: {},
    mounted () {
        this.no = this.$route.query.no ? this.$route.query.no : '';
        this.TYPE = this.$route.query.type ? this.$route.query.type : '';
        this.$store.commit('SET_HEADER', [{ title: "APP后台"},{title: '校园精英pk赛'},{title: '统计列表', path: '/student/elite-pk-statistics'},{title: '好友订单'}]);
        this.authResult = this.$route.meta.authResult;
        this.getTableData();
    },
    methods: {
        /**
         * @description 获取表格数据
         */
        getTableData (page) {
            const url = '/student/task_stuagent_extra_pk_activity%5Cactivity_statistic%5Cget_friends_purchase_list';

            this.$post(url, {
                page_id: page || this.page.now_page,
                sort_field: this.filterData.sort_field,
                sort_type: this.filterData.sort_type,
                user_keyword: this.formData.keyword,
                goods_keyword: this.formData.user_info,
                is_refund: this.formData.is_refund,
                apply_no: this.no
            }, resp => {
                if (resp.code == 1) {
                    this.tableData = resp.data.list;
                    this.page.now_page = resp.data.page.now_page;
                    this.page.total_count = resp.data.page.total_count;
                    this.page.page_size = resp.data.page.page_size;
                }
            });
        },

        /**
         * @description 数据排序
         */
        handleSortChanged(data) {
            let sortTypeMap = {
                ascending: 1,
                descending: 0
            };

            let sortFieldMap = {
                pay_money: 'pay_money'
            };

            if (data.order) {
                this.filterData.sort_field = sortFieldMap[data.prop];
                this.filterData.sort_type = sortTypeMap[data.order];
            } else {
                this.filterData.sort_field = '';
                this.filterData.sort_type = '';
            }

            this.getTableData();
        },

        /**
         * @description 过滤函数
         */
        emptyFormatter(row, column, val) {
            if (!val) return '--';
            return val;
        }
    }
};
</script>

<style lang="less" scoped>
.eliteSelfOrder {
    background-color: #fff;
    display: flex;
    flex-direction: column;
    position: relative;
    width: 100%;
    // height: 100%;
    overflow: hidden;
    margin: 12px;
    .__nav {
        width: 100%;
        height: 67px;
        display: flex;
        align-items: center;
        box-sizing: border-box;
        padding-left: 35px;
        border-bottom: 1px rgba(240, 242, 245, 1) solid;
        margin-bottom: 24px;
        padding-right: 32px;
        justify-content: space-between;
        align-items: center;
        .__nav_title {
            color: rgba(51, 51, 51, 1);
            font-size: 20px;
            font-weight: 500;
            position: relative;
            &::before {
                content: '';
                position: absolute;
                left: -8px;
                top: -1px;
                width: 3px;
                height: 20px;
                background: rgba(24, 144, 255, 1);
            }
        }
        .__nav_back {
            font-size: 14px;
            cursor: pointer;
            &:hover {
                text-decoration: underline;
            }
        }
    }
    .header-nav {
        position: relative;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 24px;
        box-sizing: border-box;
        padding: 0 32px;
        .header_left {
            display: flex;
            align-items: center;
        }
        .__info {
            display: flex;
            align-items: center;
            margin-right: 32px;
            .__info_title {
                color: rgba(51, 51, 51, 1);
                font-size: 14px;
                margin-right: 12px;
                white-space: nowrap;
            }
        }
        .__left_button {
            flex: 1;
            height: 36px;
            background: rgba(32, 160, 255, 0.1);
            border-radius: 4px;
            border: 1px solid #20A0FF;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            // margin-right: 32px;
            color: rgba(32, 160, 255, 1);
            font-size: 14px;
            font-weight: 500;
            .el-icon-hand-iconjia {
                color: rgba(32, 160, 255, 1);
                margin-right: 10px;
                font-size: 14px;
                font-weight: 500;
            }
        }
        .__right_button {
            width: 128px;
            height: 36px;
            background: #FFFFFF;
            border-radius: 4px;
            border: 1px solid #20A0FF;
            text-align: center;
            line-height: 36px;
            color: rgba(32, 160, 255, 1);
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
        }
    }

    .__wrap {
        width: calc(100% - 64px);
        margin-left: 32px;
        margin-bottom: 12px;
        flex: 1;
        overflow: hidden;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
    }
    /* 表单 */
    .scope-price {
        width: 50px;
        height: 50px;
    }
    /* 字体高亮 */
    .cursor-font {
        color: rgb(64, 158, 255);
        cursor: pointer;
    }
    /* 分页 */
    .pagination-wrapper {
        padding-top: 10px;
        padding-bottom: 10px;
        .el-pagination {
            float: right;
            padding: 0;
            background-color: transparent;
        }
    }
}
/* 排序 */
.sort-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    .sort-spliter {
        width: 1px;
        height: 12px;
        background: rgba(235, 235, 235, 1);
        margin: 0 10px;
        }
        .btn-sort {
        font-size: 14px;
        line-height: 1;
        color: #ccc;
        &:hover {
            color: #20a0ff;
        }
    }
}
.el-button-left {
    margin-left: 40px;
}
.el-button-right {
    margin-right: 10px;
}
.__flex {
    display: flex;
    align-items: center;
    .__flex_status {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        margin-right: 5px;
    }
}
.__flex_wrap {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    .__flex_wrap_title {
        color: rgba(51, 51, 51, 1);
        font-size: 14px;
        font-weight: 500;
    }
}
</style>
<style lang="less">
    .eliteSelfOrder{
        .el-table__body-wrapper .el-table__body .el-table__row td {
            border-right: none;
        }
        .el-table__header-wrapper .el-table__header .has-gutter tr th {
            border-right: none;
        }
        .el-table .el-table_1_column_6  .cell {
            position: relative;
        }
        .el-range-editor--small .el-range-separator{
            padding: 0 1px !important;
        }
    }
</style>
